<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
    <script src="../layer_mobile/layer.js"></script>
    <style>

    </style>
</head>
<body class="padb-look bg_fe">
<header><a class="icon_back"></a>云家故事</header>
<div class="ord-detail" v-cloak="">
    <div class="ord-content">
        <div class="order-t">
            <template v-if="state == 1">订单支付</template>
        </div>
        <div class="bor-c">
            <div class="title-text">
                <span>{{orderDetail.goodName}}</span>
                <span class="status" v-if="state == 1">待付款</span>
            </div>
            <div class="data-list">
                <div class="text-li">
                    <span>{{orderDetail.snName}}</span>
                    <div class="change-sty1">
                        <span class="mum-box js-reduce" data-type="0"></span>
                        <span class="num-true num-true1">{{orderDetail.num}}</span>
                        <span class="mum-box mum-boxj js-plus"></span>
                    </div>
                    <span class="fr only-price">￥{{orderDetail.snPrice}}</span>
                </div>
                <div class="text-li" v-for="item in orderDetail.upgradeInfo">
                    <span>{{item.title}}</span>
                    <div class="change-sty1">
                        <span class="mum-box js-reduce"  data-type="1" :upId="item.id"></span>
                        <span class="num-true num-true2">{{item.num}}</span>
                        <span class="mum-box mum-boxj js-plus" :upId="item.id"></span>
                    </div>
                    <span class="fr only-price">￥{{item.price}}</span>
                </div>
            </div>
            <div class="total-p">总价<span class="price">￥{{orderDetail.totalPay}}</span></div>
        </div>
    </div>
    <div class="detail-c">
        <div class="li-detail li-1 fl">
            <img :src="imgBaseurl + orderDetail.storeImg" alt="">
        </div>
        <div class="li-detail li-2 fl">
            <div class="text-1">{{orderDetail.storeName}}</div>
            <div class="font-12">
                <i class="dinwei-icon"></i>
                <span class="color-gray">{{orderDetail.storeAddress}}</span>
            </div>
        </div>
        <div class="fr li-3 "><i class="li-detail fr phone-icon" :phone="orderDetail.storePhone"></i></div>
    </div>
    <div class="like">
        <i class="marr-6 like-icon"></i>我还喜欢
    </div>
    <div class="data-love">
        <div class="li" v-for="items in storeList">
            <div class="over-h p-r go-storedetail" :storeId="items.id">
                <div class="png-sty"><img :src="imgBaseurl + items.logoId" alt=""></div>
                <div class="text-c">
                    <div class="marb-2"><span>{{items.name}}</span><i class="icon-lov love-icon"></i></div>
                    <div class="marb-2">
                        <i class="dinwei-icon"></i>
                        <span class="area-t color-97">{{items.address}}</span>
                    </div>
                    <div>
                        <span class="btn-status" v-for="item in items.label">{{item}}</span>
                    </div>
                </div>
            </div>
            <div class="child-data">
                <div class="item to_product" :productId="item.id"  v-for="item in items.productList">
                    <div class="marb-5">
                        <span class="money-sty red-act">￥{{item.nowPrice}}</span>
                        <span class="status-ms">
                            <i class="miaosha-icon"></i>&nbsp;秒杀
                        </span>
                        <span>{{item.name}}</span>
                    </div>
                    <div><span class="money-sty money-sty1">￥{{item.price}}</span><span>已售{{item.saleNum}}</span></div>
                </div>
            </div>
            <div class="look-more" :storeId="items.id"><a>查看更多>></a></div>
        </div>
    </div>
    <div class="fotter-fix">
        <span class="status">立即支付</span>
        <div class="to_agreement">
            <span><i class="check-png agree"></i><span class="agree-text">我已阅读并接受</span></span>
            <a href="agreement.html?key=service_protocol_content&title=服务协议">服务协议</a>
        </div>
    </div>
</div>
<div id="pay">

</div>
</body>
<script src="../js/config.js"></script>
<script>
    $(document).on('click', '.fotter-fix .status', function () {
        if($('.agree').hasClass('check-png-no')){
            layer.open({
                content: '请阅读协议，且同意！'
                ,skin: 'msg'
                ,time: 2
            });
        }else{
            get_ajax("order/payForOrderH5", {orderId:orderId,mobileType:"phone",payType:"26-1",token:token}, function (data) {
                var data = data.params;
                $("#pay").html(data)
            });
        }
    })
    var state = getUrlParam("state");
    var orderId = getUrlParam("orderId");
    var productId = '';
    var app = new Vue({
        el: '.ord-detail',
        data: {
            state: state,
            orderDetail: "",
            imgBaseurl: imgBaseurl,
            storeList:'',
            token:token,
        },
        beforeCreate: function () {
            get_ajax("order/getOrderDetail", {orderId:orderId,token:token}, function (data) {
                data.orderDetail.upgradeInfo = JSON.parse(data.orderDetail.upgradeInfo);
                app.orderDetail = data.orderDetail;
                productId = data.orderDetail.productId
            });
            getStoreList();
        },
        updated: function () {

        },
        methods: {
            submitInfo: function (id) {
                var sendData = {
                    orderCode: this.orderCode,
                    name: this.name,
                    mobile: this.mobile,
                    content: this.content,
                    token: token,
                }
                get_ajax("order/addAdvice", sendData, function (data) {
                    mui.alert('提交成功！', '提示', function () {
                        history.go(-1);
                    });
                });
            },
        },
        mounted:function () {

        }
    })

    function getStoreList() {
        var sendData = {
            lit: 31.26249,
            lat: 120.63212,
            city: '南京',
            keyword: '',
            classifyId: 0,
            brandId: 0,
            sort: 1,
            limit: 2,
            page: 1,
        }
        get_ajax("store/getStoreList", sendData, function (data) {
            var data = data.storeExlist;
            data.forEach(function (items) {
                items.label = items.label.split(",");
            });
            app.storeList = data;
        });
    }


    $(document).on('click','.js-reduce',function(){
        if($(this).siblings('.num-true').html()>1){
            var startNum =  Number($(this).siblings('.num-true').text());
            $(this).siblings('.num-true').html(startNum-1);
            get_ajax("order/changeOrderNum", {
                token:token,
                orderId:orderId,
                productId:productId,
                goodNum:$('.num-true1').html(),
                upId:$(this).attr('upId') ||'',
                upNum:$(this).siblings('.num-true2').html() ||'',
            }, function (data) {
                get_ajax("order/getOrderDetail", {orderId:orderId,token:token}, function (data) {
                    data.orderDetail.upgradeInfo = JSON.parse(data.orderDetail.upgradeInfo);
                    app.orderDetail = data.orderDetail;
                });
            });
        }
    })
    $(document).on('click','.js-plus',function(){
        var startNum =  Number($(this).siblings('.num-true').text());
        $(this).siblings('.num-true').html(startNum+1);
            get_ajax("order/changeOrderNum", {
                token:token,
                orderId:orderId,
                productId:productId,
                goodNum:$('.num-true1').html(),
                upId:$(this).attr('upId') || '',
                upNum:$(this).siblings('.num-true2').html() || '',
            }, function (data) {
                get_ajax("order/getOrderDetail", {orderId:orderId,token:token}, function (data) {
                    data.orderDetail.upgradeInfo = JSON.parse(data.orderDetail.upgradeInfo);
                    app.orderDetail = data.orderDetail;
                });
            });
    })
    $(document).on('click','.agree',function(){
        $(this).toggleClass('check-png-no');
    })

    //跳转页面
    $(document).on('click','.go-storedetail,.look-more', function () {
        var storeId = $(this).attr("storeId");
        window.location.href = 'store-detail.html?storeId='+storeId;
    })
    $(document).on('click', '.to_product', function () {
        var productId = $(this).attr("productId");
        window.location.href = 'product.html?productId='+productId;
    })
</script>
</html>